<template>
  <div class="home-box flex-col-start">
    <el-carousel class="home-carousel" height="600px" style="width: 100%">
      <el-carousel-item v-for="(image,index) in carouselList" :key="image.url">
        <el-image :src="image.url" fit="cover" style="height: 100%;width: 100%">
        </el-image>

      </el-carousel-item>
    </el-carousel>

    <div class="home-hot-body home-body">

      <h2>热门萌宠</h2>
      <HotAnimalBox></HotAnimalBox>
    </div>

    <div class="home-header">
      <h2>更多选择</h2>
      <HomeMenu style="height: 100%"></HomeMenu>
    </div>


    <div ref="aniBox" class="home-other-body home-body">
      <h2>猫狗图谱</h2>
      <AnimalBox></AnimalBox>
    </div>
  </div>
</template>

<script>
import AnimalSimpleCard from "@/components/animal/AnimalSimpleCard.vue";
import HomeMenu from "@/components/Menu/HomeMenu.vue";
import GoTop from "@/components/button/GoTop.vue";
import HotAnimalBox from "@/components/animal/HotAnimalBox.vue";
import AnimalBox from "@/components/animal/AnimalBox.vue";

export default {
  name: "Home",
  components: {AnimalBox, HotAnimalBox, GoTop, HomeMenu, AnimalSimpleCard},
  data(){
    return {
      carouselList: [
        {
          url: "https://img0.baidu.com/it/u=3418213328,2408746035&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        },
        {
          url: "https://img1.baidu.com/it/u=4183921079,1670744990&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
        }
      ],

    }
  },
  methods:{

  }
}
</script>

<style scoped lang="less">
  .home-box {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    padding-bottom: 50px;

    .home-header {
      width: 80%;
      //background-color: #01acac;
      margin: 20px 0;
      border-radius: 5px;
    }

    .home-body {
      margin-top: 10px;
      width: 80%;
      margin-bottom: 30px;
    }
    .home-hot-body{

    }
    .home-other-body{

    }


  }
  

</style>